<!--
 * @Description: 
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-24 23:28:35
-->


<template>
  <div>
    <h1>学习Pinia</h1>
    <div>
      <div>
        <h2>第二章（初始化仓库Store）</h2>
        <div>
          <p>【TestStore Pinia】 current: {{ TestStore.current }} ； name: {{ TestStore.name }}</p>
        </div>
      </div>
      <hr />
      <div>
        <h2>第三章（State）</h2>
        <div>
          <h3>改变Pinia的值</h3>
          <div>
            <button @click="th2_change1">方法1</button>
            <button @click="th2_change2">方法2</button>
            <button @click="th2_change3">方法3</button>
            <button @click="th2_change4">方法4</button>
            <button @click="th2_change5">方法5</button>

          </div>
        </div>
      </div>
      <hr />
      <div>
        <h2>第四章（解构store）</h2>
        <div>
          <p>【th3_change1】 pinia 解构后的值 current: {{ current }} ； name: {{ name }}</p>
          <p>【th3_change1】 pinia 通过storeToRefs解构后的值 currentForStoreToRefs: {{ currentForStoreToRefs }} ；
            nameForStoreToRefs: {{ nameForStoreToRefs }}</p>
          <button @click="th4_change1">直接解构后current++</button>
          <button @click="th4_change2">通过storeToRefs解构后current++</button>
        </div>
      </div>
      <hr />
      <div>
        <h2>第五章（Actions，getters）</h2>
        <div>
          <p>actions-user: {{ TestStore.user }}</p>
          <p>actions-name: {{ TestStore.name }}</p>
          <p>getters: {{ TestStore.newName1 }}</p>

          <button @click="th5_change1">th5_change1同步</button>
          <button @click="th5_change2">th5_change2异步</button>
        </div>
      </div>
      <hr />
      <div>
        <h2>第六章（API）</h2>
        <div>
          <button @click="th6_reset">th6_reset</button>
        </div>
      </div>
      <hr />
      <div>
        <h2>第七章（pinia插件）</h2>
        <div>
          <p>BaseStore current: {{ BaseStore.current }}</p>
          <button @click="th7_change">th7_change</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { useTestStore, useStore } from './store'
// 第二章（初始化仓库Store）
const TestStore = useTestStore()

// 第三章（State）
// 一共有5种方法改变pinia内的值
// 方法1
const th2_change1 = () => {
  TestStore.current++
}
// 方法2
const th2_change2 = () => {
  TestStore.$patch({
    current: 222,
    name: '2IA2'
  })
}
// 方式3
const th2_change3 = () => {
  TestStore.$patch((state) => {
    state.current = 333
    state.name = "3IA3"
  })
}
// 方法4 不常用，有弊端，会覆盖整个对象
const th2_change4 = () => {
  TestStore.$state = {
    current: 444,
    name: "4IA4",
    user: {
      name: "4飞机4",
      age: 4444
    }
  }
}
// 方法5 通过actions修改
const th2_change5 = () => {
  TestStore.setCurrent(555)
}

// 第四章（解构store）

// pinia 直接解构不具有响应性
const { current, name } = TestStore

const th4_change1 = () => {
  TestStore.current++
}

import { storeToRefs } from 'pinia'
const { current: currentForStoreToRefs, name: nameForStoreToRefs } = storeToRefs(TestStore)

const th4_change2 = () => {
  currentForStoreToRefs.value++
}

// 第五章（Actions，getters）
const th5_change1 = () => {
  TestStore.setUser1()
}
const th5_change2 = () => {
  TestStore.setUser2()
}

// 第六章（API）
// $reset 恢复原始值
const th6_reset = () => {
  TestStore.$reset()
}
// $subscribe state有任何变动都会触发
TestStore.$subscribe((args, state) => {
  console.log('TestStore.$subscribe args：', args)
  console.log('TestStore.$subscribe state', state)
}, {
  detached: true,
})
// $onAction
TestStore.$onAction((args) => {
  args.after(() => {
    console.log(' ==> TestStore.$onAction After <==');

  })
  console.log('TestStore.$onAction args：', args)
}, true)

// 第七章（pinia插件）
const BaseStore = useStore()

const th7_change = () => {
  BaseStore.current++
}

</script>

<style scoped>
h1,
h2,
h3,
h4,
hr {
  margin: 10px 0;
}
</style>
